<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="page" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="名称" name="name">
          <Input v-model:value="formState.name" allow-clear placeholder="名称" />
        </FormItem>
        <FormItem label="标识" name="mark">
          <Input v-model:value="formState.mark" allow-clear placeholder="标识" />
        </FormItem>
      </template>
      <template #toolBtn>
        <Button type="primary" @click="onAddBtn">添加</Button>
      </template>
      <!-- <template #operation="{ record }">
        <Space>
          <a @click="handleEdit(record)">菜单和权限</a>
        </Space>
      </template> -->
    </Table>

    <!-- 新增 -->
    <Drawer
      title="新增权限"
      placement="right"
      :visible="addVisible"
      @close="onAddClose"
      width="500"
    >
      <Add v-if="addVisible" @on-success="handleSuccess" />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { page } from '/@/api/sys/permission'
  import { Table } from '/@/components/Table'
  import { FormItem, Input, Button, Drawer } from 'ant-design-vue'
  import Add from './Add.vue'

  const table: any = ref(null)

  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '权限标识',
      dataIndex: 'mark',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
  ]

  const formState = ref({
    name: '',
    mark: '',
  })

  const reset = () => {
    formState.value = {
      name: '',
      mark: '',
    }
  }

  const addVisible = ref(false)
  const onAddBtn = () => {
    addVisible.value = true
  }
  const onAddClose = () => (addVisible.value = false)
  const handleSuccess = () => {
    onAddClose()
    table.value.handleQuery()
  }
</script>
